<template>
  <van-cell class="tuidri" @click="goDetail">
    <van-image
    src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2111605174,3864315119&fm=11&gp=0.jpg"
    />
    <div class="rig">
        <span class="s_title">{{ tuidri.name }}</span>
        <div>
            <span class="s_star">{{ tuidri.garde }} <img class="img" src="~@/assets/star.svg" alt=""></span>&nbsp;&nbsp;&nbsp;
            <span class="s_paiming">综合排名第{{ tuidri.ranking ? tuidri.ranking : 3 }}名</span>
        </div>
        <div>
            <span class="s_dangci">￥{{ tuidri.price }}&nbsp;&nbsp; {{ tuidri.classes }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;岳麓区 2.1km</span>
            <span class="s_pation">{{ tuidri.types }}</span>
        </div>
        <div class="bz" v-for="(edd, index) in tuidri.merit" :key="index">
            <span>{{ edd }}</span>
        </div>
    </div>
  </van-cell>
</template>

<script>
export default {
  props: {
    tuidri: {
      type: Object,
      required: true
    }
  },
  methods: {
    goDetail () {
    //   console.log(this.tuidri.id)
      const id = this.tuidri.id
      //   console.log(id)
      this.$router.push({
        name: 'detail', // 这里是你要跳转的路由path
        params: { id: id }
      })
    }
  }
}
</script>

<style lang="less" scope>
.tuidri {
    height: 300px;
    position: relative;
    background-color: rgb(247, 244, 244);
    .van-image {
        // display: inline-block;
        float: left;
        width: 232px;
        height: 176px;
        .van-image__img {
        width: 100%;
        transform: translateY(40%);
      }
    }
    .rig {
        position: absolute;
        height: 270px;
        left: 250px;
        font-size: 14px;
        // padding-left: 140px;
        box-sizing: border-box;
        float: left;
        .img{
            position: relative;
            width: 24px;
            top: 2px;
        }
        .span {
            line-height: 20px;
            font-size: 14px;
        }
        .s_title {
            display: inline-block;
            font-size: 30px;
            font-weight: 800;
            line-height: 70px;
        }
        .s_pation {
            // float: right;
            display: block;
        }
        .bz {
            // margin-top: 30px;
            float: left;
            span {
                // display: inline-block;
                border: 1px solid #ccc;
                margin-right: 5px;
                font-size: 12px;
            }
        }
        // .chri{
        //     width: 600px;
        //     background-color: red;
        // }
    }
}
</style>
